<template>
  <!-- :ok-button-props="{ style: model.status != 1 && { display: 'none' } }" -->
  <a-modal
    :title="model.type == 0 ? '审核' : '编辑'"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    :okText="model.type == 0 ? '整改通过' : '保存'"
    @ok="() => { $emit('ok',model.type , values, model.action_image) }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form v-if="model" :form="form" v-bind="formLayout">
        <a-form-item v-if="model && model.log_id" label="主键ID" hidden>
          <a-input v-decorator="['log_id', { initialValue: model.log_id }]" disabled />
        </a-form-item>
        <a-form-item v-if="model.type == 0" label="整改对象">
          <div>{{ model.family_master_name }}</div>
        </a-form-item>
        <a-form-item label="当前定位" v-if="model.type == 1">
          <div>
            <label style="display: block;float: left;width: 70px;">村&nbsp;&nbsp;列&nbsp;&nbsp;表</label>
            <a-select style="width: 280px;" v-model="values.village_id">
              <a-select-option v-for="(item, index) in model.villList" :key="index" :value="item.village_id">
                {{ item.village_name }}
              </a-select-option>
            </a-select>
          </div>
          <div>
            <label style="display: block;float: left;width: 70px;">定位信息</label>
            <a-input style="width: 280px;" placeholder="" v-model="values.address" />
          </div>
        </a-form-item>
        <a-form-item label="发起人">
          <div>{{ model.fullname }}</div>
        </a-form-item>
        <a-form-item label="积分类型">
          <div v-if="model.type == 0">{{ model.action_name }}</div>
          <a-select style="width: 280px;" v-if="model.type == 1" @change="handleChange" v-model="values.reason_id">
            <a-select-option v-for="(item, index) in model.actiona_lists" :key="index" :value="item.id">
              {{ item.action_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-form-item>
        <a-form-item label="扣分">
          <div>{{ model.point }}</div>
          <!-- <a-input v-if="model.type == 1" style="width: 280px;" placeholder="" v-model="model.point" /> -->
        </a-form-item>
        <a-form-item label="扣分内容">
          <div>{{ model.action_content }}</div>
          <!-- <a-input v-if="model.type == 1" style="width: 280px;"  placeholder="" v-model="values.action_content" /> -->
          <div v-if="model.type == 0">
            <img
              @click="previewImage = item.url;previewVisible = true"
              v-for="(item, index) in model.action_image"
              :key="index"
              style="width: 120px; height: 120px; border-radius: 5px; margin: 5px;cursor: pointer;"
              :src="item.url">
          </div>
          <div v-if="model.type == 1">
            <Upload @change="change" ref="mychild" :maxLength="3"></Upload>
          </div>
        </a-form-item>
        <a-form-item v-show="false" label="整改状态">
          <div v-if="model.status == 0">未整改</div>
          <div v-if="model.status == 1">整改中</div>
          <div v-if="model.status == 2">已整改</div>
        </a-form-item>
        <a-form-item label="整改回馈" v-show="model.type == 0">
          <div v-if="model.rectify_image.length > 0">
            <img
              @click="previewImage = item;previewVisible = true"
              v-for="(item, index) in model.rectify_image"
              :key="index"
              style="width: 120px; height: 120px; border-radius: 5px; margin: 5px;cursor: pointer;"
              :src="item">
          </div>
          <div v-else>暂无反馈</div>
        </a-form-item>
        <!-- <a-form-item label="选项内容">
          <a-input :disabled="okHidden" placeholder="请输入选项内容" v-decorator="['option', {rules: [{required: true, message: '选项内容不能为空！' }, {max: 10, message: '最大可输入10个字符！' }]}]" />
        </a-form-item> -->
        <!-- <a-form-item label="状态">
          <a-input :disabled="okHidden" v-decorator="['status']" />
        </a-form-item> -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import Upload from '@/components/Upload/Upload'
  // 表单字段
  const fields = ['log_id', 'family_master_name', 'status', 'action_image']

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      okHidden: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data () {
      this.formLayout = {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 4
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 19
          }
        }
      }
      return {
        previewVisible: false,
        previewImage: '',
        form: this.$form.createForm(this),
        currentLength: 0,
        values: {
          log_id: '',
          reason_id: '',
          action_name: '',
          village_id: '',
          address: '',
          family_id: ''
        }
      }
    },
    created () {
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', n => {
        if (n) {
          const data = pick(this.model, fields)
          this.$nextTick(() => {
            this.form.setFieldsValue(data)
          })
        }
      })
      this.$nextTick(() => {
        // console.log('"扣分内容"', this.model.action_image)
        if (this.model.type == 1) {
          this.values.log_id = this.model.log_id
          this.values.reason_id = this.model.pc_id
          this.values.action_name = this.model.action_name
          this.values.village_id = this.model.village_id
          this.values.address = this.model.address
          this.values.family_id = this.model.family_no
          this.$refs.mychild.setInitFileList(this.model.action_image)
        }
      })
    },
    methods: {
      handleChange (e) {
        // this.values.action_name = e.action_name
        this.model.actiona_lists.forEach((item) => {
          if (item.id == e) {
            this.values.action_name = item.action_name
          }
        })
      },
      change (e) {
        this.values.action_image = e.map((item) => {
          return item.url
        })
      }
    },
    components: {
      Upload
    }
  }
</script>

<style scoped>
  >>>.ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0
  }

  >>>.clearfix {
    height: 110px
  }

  >>>.remove70 {
    margin-bottom: 110px !important;
    height: 300px !important;
  }

  .htm {
    min-height: 40px;
    max-height: 350px;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid #eee
  }
</style>
